<template lang="html">
  <div class="linkage">
    <div class='sheng'>
    	<div class='sheng-left'>
    		<p>省份</p>
    	</div> 
    	<select v-model='ShengContent'  @change="ShengHander" > 
		    <option v-for="(item,index) in city">
			  {{item.name}}
			</option>
		</select>
		<div >
		</div> 
	</div>
    <div class='shi'>
    	<div class='shi-left'>
    		<p>城市</p>
    	</div> 	
    	<select v-model='ShiContent'  @change="shiHander">
    		<option v-for="(item,index) in city[this.ShiIndex].sub">    
			  {{item.name}} 
			</option>
    	</select>	 
	</div>
    <div class='qu'>
   	 	<div class='qu-left'>
   	 		<p>地区</p>
   	 	</div> 
   	 	<select v-model='QuContent'  @change="shiHander">
    		<option v-for="(item,index) in city[this.ShiIndex].sub[this.QuIndex].sub">    
			  {{item.name}} 
			</option>
    	</select>	 	 
	</div>
  </div>
</template>

<script>
export default {
  name:'Linkage',
  data(){
  	return{
	  	city:[
				{
					name: "广东",
					sub: [{name: "请选择", sub: []},
						{
							name: "广州",
							sub: [{name: "请选择"}, {name: "越秀区"}, {name: "荔湾区"}, {name: "海珠区"}, {name: "天河区"}, {name: "白云区"}, {name: "黄埔区"}, {name: "番禺区"}, {name: "花都区"}, {name: "南沙区"}, {name: "萝岗区"}, {name: "增城市"}, {name: "从化市"}, {name: "其他"}],
							type: 0
						},
						{
							name: "深圳",
							sub: [{name: "请选择"}, {name: "福田区"}, {name: "罗湖区"}, {name: "南山区"}, {name: "宝安区"}, {name: "龙岗区"}, {name: "盐田区"}, {name: "其他"}],
							type: 0
						},
						{
							name: "珠海",
							sub: [{name: "请选择"}, {name: "香洲区"}, {name: "斗门区"}, {name: "金湾区"}, {name: "其他"}],
							type: 0
						},
						{
							name: "汕头",
							sub: [{name: "请选择"}, {name: "金平区"}, {name: "濠江区"}, {name: "龙湖区"}, {name: "潮阳区"}, {name: "潮南区"}, {name: "澄海区"}, {name: "南澳县"}, {name: "其他"}],
							type: 0
						},
						{
							name: "韶关",
							sub: [{name: "请选择"}, {name: "浈江区"}, {name: "武江区"}, {name: "曲江区"}, {name: "乐昌市"}, {name: "南雄市"}, {name: "始兴县"}, {name: "仁化县"}, {name: "翁源县"}, {name: "新丰县"}, {name: "乳源瑶族自治县"}, {name: "其他"}],
							type: 0
						},
						{
							name: "佛山",
							sub: [{name: "请选择"}, {name: "禅城区"}, {name: "南海区"}, {name: "顺德区"}, {name: "三水区"}, {name: "高明区"}, {name: "其他"}],
							type: 0
						},
						{
							name: "江门",
							sub: [{name: "请选择"}, {name: "蓬江区"}, {name: "江海区"}, {name: "新会区"}, {name: "恩平市"}, {name: "台山市"}, {name: "开平市"}, {name: "鹤山市"}, {name: "其他"}],
							type: 0
						},
						{
							name: "湛江",
							sub: [{name: "请选择"}, {name: "赤坎区"}, {name: "霞山区"}, {name: "坡头区"}, {name: "麻章区"}, {name: "吴川市"}, {name: "廉江市"}, {name: "雷州市"}, {name: "遂溪县"}, {name: "徐闻县"}, {name: "其他"}],
							type: 0
						},
						{
							name: "茂名",
							sub: [{name: "请选择"}, {name: "茂南区"}, {name: "茂港区"}, {name: "化州市"}, {name: "信宜市"}, {name: "高州市"}, {name: "电白县"}, {name: "其他"}],
							type: 0
						},
						{
							name: "肇庆",
							sub: [{name: "请选择"}, {name: "端州区"}, {name: "鼎湖区"}, {name: "高要市"}, {name: "四会市"}, {name: "广宁县"}, {name: "怀集县"}, {name: "封开县"}, {name: "德庆县"}, {name: "其他"}],
							type: 0
						},
						{
							name: "惠州",
							sub: [{name: "请选择"}, {name: "惠城区"}, {name: "惠阳区"}, {name: "博罗县"}, {name: "惠东县"}, {name: "龙门县"}, {name: "其他"}],
							type: 0
						},
						{
							name: "梅州",
							sub: [{name: "请选择"}, {name: "梅江区"}, {name: "兴宁市"}, {name: "梅县"}, {name: "大埔县"}, {name: "丰顺县"}, {name: "五华县"}, {name: "平远县"}, {name: "蕉岭县"}, {name: "其他"}],
							type: 0
						},
						{
							name: "汕尾",
							sub: [{name: "请选择"}, {name: "城区"}, {name: "陆丰市"}, {name: "海丰县"}, {name: "陆河县"}, {name: "其他"}],
							type: 0
						},
						{
							name: "河源",
							sub: [{name: "请选择"}, {name: "源城区"}, {name: "紫金县"}, {name: "龙川县"}, {name: "连平县"}, {name: "和平县"}, {name: "东源县"}, {name: "其他"}],
							type: 0
						},
						{
							name: "阳江",
							sub: [{name: "请选择"}, {name: "江城区"}, {name: "阳春市"}, {name: "阳西县"}, {name: "阳东县"}, {name: "其他"}],
							type: 0
						},
						{
							name: "清远",
							sub: [{name: "请选择"}, {name: "清城区"}, {name: "英德市"}, {name: "连州市"}, {name: "佛冈县"}, {name: "阳山县"}, {name: "清新县"}, {name: "连山壮族瑶族自治县"}, {name: "连南瑶族自治县"}, {name: "其他"}],
							type: 0
						},
						{
							name: "东莞",
							sub: [],
							type: 0
						},
						{
							name: "中山",
							sub: [],
							type: 0
						},
						{
							name: "潮州",
							sub: [{name: "请选择"}, {name: "湘桥区"}, {name: "潮安县"}, {name: "饶平县"}, {name: "其他"}],
							type: 0
						},
						{
							name: "揭阳",
							sub: [{name: "请选择"}, {name: "榕城区"}, {name: "普宁市"}, {name: "揭东县"}, {name: "揭西县"}, {name: "惠来县"}, {name: "其他"}],
							type: 0
						},
						{
							name: "云浮",
							sub: [{name: "请选择"}, {name: "云城区"}, {name: "罗定市"}, {name: "云安县"}, {name: "新兴县"}, {name: "郁南县"}, {name: "其他"}],
							type: 0
						},
						{name: "其他"}],
					type: 1
				},
			],
  		ShengContent:'',
  		ShiIndex:0,
  		ShiContent:'',
  		QuIndex:0,
  		QuContent:''
  	}
  },
  methods:{
  	ShengHander(){
  		if(this.ShengContent == '广东'){
  			this.ShiIndex = 0
  		}
  	},
  	shiHander(){
  		if(this.ShiContent == '广州'){
  			this.QuIndex = 1
  		}
  		else if(this.ShiContent == '深圳'){
  			this.QuIndex = 2
  		}
  		else if(this.ShiContent == '珠海'){
  			this.QuIndex = 3
  		}
  		else if(this.ShiContent == '汕头'){
  			this.QuIndex = 4
  		}
  		else if(this.ShiContent == '韶关'){
  			this.QuIndex = 5
  		}
  		else if(this.ShiContent == '佛山'){
  			this.QuIndex = 6
  		}
  		else if(this.ShiContent == '江门'){
  			this.QuIndex = 7
  		}
  		else if(this.ShiContent == '湛江'){
  			this.QuIndex = 8
  		}
  		else if(this.ShiContent == '茂名'){
  			this.QuIndex = 9
  		}
  		else if(this.ShiContent == '肇庆'){
  			this.QuIndex = 10
  		}
  		else if(this.ShiContent == '惠州'){
  			this.QuIndex = 11
  		}
  		else if(this.ShiContent == '梅州'){
  			this.QuIndex = 12
  		}
  		else if(this.ShiContent == '汕尾'){
  			this.QuIndex = 13
  		}
  		else if(this.ShiContent == '河源'){
  			this.QuIndex = 14
  		}
  		else if(this.ShiContent == '阳江'){
  			this.QuIndex = 15
  		}
  		else if(this.ShiContent == '清远'){
  			this.QuIndex = 16
  		}  	
  		else if(this.ShiContent == '东莞'){
  			this.QuIndex = 17
  		}
  		else if(this.ShiContent == '中山'){
  			this.QuIndex = 18
  		}
  		else if(this.ShiContent == '潮州'){
  			this.QuIndex = 19
  		}  		
  		else if(this.ShiContent == '揭阳'){
  			this.QuIndex = 20
  		}
  	}
  }
}
</script>

<style lang="less" scoped>
select{
	width: 60%;
	height: 90%;
	background:#fff;
	border: 0;
	font-size:0.35rem;
	option{
		width: 10%;
		font-size:0.25rem;
	}
}
.linkage{
	width: 100%;
	.sheng{
		width: 100%;
		height: 1rem;
		border-bottom:1px solid #717171;
		line-height:1rem;
		.sheng-left{
			width: 20%;
			height: 100%;
			float: left;
			text-align:center;
			p{
				font-size:0.35rem;
				color:#000;
			}
		}
	}
	.shi{
		width: 100%;
		height: 1rem;
		border-bottom:1px solid #717171;
		line-height:1rem;
		.shi-left{
			width: 20%;
			height: 100%;
			float: left;
			text-align:center;
			p{
				font-size:0.35rem;
				color:#000;
			}
		}
	}
	.qu{
		width: 100%;
		height: 1rem;
		border-bottom:1px solid #717171;
		line-height:1rem;
		.qu-left{
			width: 20%;
			height: 100%;
			float: left;
			text-align:center;
			p{
				font-size:0.35rem;
				color:#000;
			}
		}
	}
}
</style>
